<template>
  <div>

    <div
      class="banner-box h-[208px] flex-center bg-[url('~/assets/images/product/hardware_banner.png')] bg-cover bg-no-repeat">
      <div class="text-center">
        <h1 class="text-4xl text-white"> - 硬件产品 - </h1>
        <h3
          class=" uppercase text-[#9D9D9D] bg-clip-text text-fill-color bg-gradient-to-t from-[#FBFBFB] to-[#EFEFEF] ">
          Hardware products</h3>
      </div>
    </div>

    <div class="bg-[#FBFBFB] py-5 ">
      <div class="module-con flex">
        <div class="bg-white py-5 px-8 w-fit h-fit rounded-lg border border-[#F3F3F3] hidden md:block sticky top-24">
          <ul>
            <li v-for="(item, index) in list" :key="index" class="py-4 border-b border-[#F0F0F0]">
              <div class="flex items-center" @click="handleTab(index)">
                <nuxt-link :to="item.path" class="text-[15px] w-40" :class="{ 'text-[#1393FF]': current === index }">{{
                    item.name
                }}</nuxt-link>
                <img class="w-3 h-3" :class="{ 'rotate-180': current === index }"
                  src="~/assets/images/icon_arrow_down.png" />
              </div>
              <ul v-if="item.children && current === index">
                <li v-for="(sIt, sInd) in item.children" :key="sInd" class="ml-5 mt-4 text-[#828282] text-sm">
                  <nuxt-link :to="sIt.path"> {{ sIt.name }}</nuxt-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="ml-5">
          <!-- 劳务实名制 -->
          <div v-show="current === 0">
            <div class="p-3 border-[0.5px] border-[#DBE9FF] text-[15px] text-[#1393FF] rounded">
              劳务实名制系统，可以对项目施工现场的所有进出人员进行考勤打卡，加强对建筑工人的有效管理，减少用工纠纷问题，保障农民工合法权益。劳务实名制终端设备主要包括：进出口闸机、人脸识别一体机、身份证阅读器、人脸采集摄像头等硬件设备。
            </div>

            <h3 id="ProudctVeriface" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              人脸识别一体机</h3>
            <ProudctVeriface></ProudctVeriface>

            <h3 id="ProductGate" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">进出口闸机
            </h3>
            <ProductGate></ProductGate>

            <h3 id="ProductCollectFace"
              class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">人脸采集摄像头</h3>
            <ProductCollectFace></ProductCollectFace>

            <h3 id="ProductCardReader" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              身份证阅读器</h3>
            <ProductCardReader></ProductCardReader>

            <h3 id="ProductContainer" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              集装箱</h3>
            <ProductContainer></ProductContainer>
          </div>

          <!-- 环境监测终端设备 -->
          <div v-show="current === 1">
            <h3 id="environment" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              环境监测终端设备</h3>
            <!-- <div class="p-3 border-[0.5px] border-[#DBE9FF] text-[15px] text-[#1393FF] rounded">
              劳务实名制系统，可以对项目施工现场的所有进出人员进行考勤打卡，加强对建筑工人的有效管理，减少用工纠纷问题，保障农民工合法权益。劳务实名制终端设备主要包括：进出口闸机、人脸识别一体机、身份证阅读器、人脸采集摄像头等硬件设备。
            </div> -->
            <div class="mt-10">
              <img alt="环境监测系统" class="w-full h-fit " src="../../assets/images/solution/env_product_01.png" />
              <img class="w-full h-fit mt-10 -ml-3" src="../../assets/images/solution/env_product_02.png" />
            </div>

          </div>

          <!-- 视频监控终端设备 -->
          <div v-show="current === 2">
            <h3 id="video" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              视频监控终端设备</h3>
            <div class="p-3 border-[0.5px] border-[#DBE9FF] text-[15px] text-[#1393FF] rounded">
              视频监控设备，24小时对施工现场、围场、生活区、物料堆放区、施工设备等重点区域进行全程高清监控和记录，加强对工地人员行为规范监督，减少安全隐患，保证工地安全生产。主要有球机、枪机两大产品类型。
            </div>
            <div class="mt-10">
              <div
                class="pl-[24%] rounded shadow pr-[9%] relative py-[30px] bg-gradient-to-t from-[#F8FEFF] to-[#FFFFFF]">
                <img alt="视频监控系统" class="absolute top-[33px] left-7 md:left-[60px] w-[7.7vw]"
                  src="../../assets/images/solution/video_product_01.png" />
                <img class="absolute top-[33px] right-[77px] w-[3.18vw]"
                  src="../../assets/images/icon_ quotation.png" />
                <div>
                  <h3 class="text-gray-700 font-medium">400万6寸网络高清球机</h3>
                  <p class="mt-[9px] text-[#828282] text-sm leading-7 whitespace-pre-line">
                    支持23倍光学变倍，16倍数字变倍，最大支持256GB microSD卡存储
                    IP66，抗干扰能力强，适用于严酷的电磁环境，符合GB/T17626.2/3/4/5/6四级标准采用高效补光阵列，低功耗，红外补光150m
                    支持区域入侵侦测，越界侦测，进入区域侦测和离开区域侦测等智能侦测
                  </p>
                  <h3 class="text-gray-700 font-medium mt-5">200万6寸球机摄像机</h3>
                  <p class="mt-[9px] text-[#828282] text-sm leading-7 whitespace-pre-line">
                    支持20倍光学变倍，16倍数字变倍，最大支持256GB microSD卡存储
                    IP66，抗干扰能力强，适用于严酷的电磁环境，符合GB/T17626.2/3/4/5/6四级标准采用高效补光阵列，低功耗，红外补光150m
                    支持区域入侵侦测，越界侦测，进入区域侦测和离开区域侦测等智能侦测
                  </p>
                </div>
              </div>
              <div
                class="pl-[24%] mt-5 rounded shadow pr-[9%] relative py-[30px] bg-gradient-to-t from-[#F8FEFF] to-[#FFFFFF]">
                <img class="absolute top-[33px] left-[26px] w-[10.5vw]"
                  src="../../assets/images/solution/video_product_02.png" />
                <img class="absolute top-[33px] right-[77px] w-[3.18vw]"
                  src="../../assets/images/icon_ quotation.png" />
                <div>
                  <h3 class="text-gray-700 font-medium">
                    型号标准：DS-IPC-B12HV2-IA / DS-IPC-B12HV2-IA POE
                  </h3>
                  <p class="mt-[9px] text-[#828282] text-sm leading-7 whitespace-pre-line">
                    符合IP66防尘防水设计，可靠性高 内置1个麦克风，高清拾音
                    采用高效阵列红外灯，使用寿命长，红外照射距离最远可达50 m
                    支持背光补偿，3D数字降噪，数字宽动态，适应不同监控环境
                    最高分辨率可达1920 × 1080 @25
                    fps，在该分辨率下可输出实时图像下可输出实时图像
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- 塔机监控终端设备 -->
          <div v-show="current === 3">
            <h3 id="tower" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              塔机监控终端设备</h3>
            <div class="p-3 border-[0.5px] border-[#DBE9FF] text-[15px] text-[#1393FF] rounded">
              塔机监控系统，由安装于塔机吊臂、塔身及传动结构处的各类传感器，控制主机、显示屏，无线通讯模块，以及在远程服务器部署的监控软件组成，通过无线网络把各种传感器采集的参数实时上传到智慧工地监管平台，实现系统监管。
            </div>
            <img class="w-full my-10" src="../../assets/images/solution/tower_product.png" />
            <div class="flex flex-col xl:flex-row xl:space-x-10">
              <div class="bg-gradient-to-t from-[#F8FEFF] to-[#FFFFFF] py-5 px-10 flex-1 shadow">
                <div class="text-[#444] bg-[#E4EFFF] w-fit">塔机安全保护系统</div>
                <div class="mt-2 flex">
                  <div class="text-sm text-[#828282] leading-7 flex-1">
                    <p>高度、幅度、回转、重量、力矩、倾角、防碰撞</p>
                    <div class="flex">
                      <p class="flex-1">电气参数：AC220V</p>
                      <p>工作环境温度： -30℃—60℃</p>
                    </div>
                    <div class="flex">
                      <p class="flex-1">整机功耗：25W</p>
                      <p>工作湿度：小于 95%（25℃）</p>
                    </div>
                    <div class="flex">
                      <p class="flex-1">报警音量：大于 60DB</p>
                      <p>工作方式：连续工作</p>
                    </div>
                    <div class="flex">
                      <p class="flex-1">误差：小于 0.5%</p>
                      <p>震动：加速度≤5G</p>
                    </div>
                    <p>报警方式：声、图像报警</p>
                  </div>
                  <img class="w-[61px] h-fit -mt-4" src="../../assets/images/icon_ quotation.png" />
                </div>
              </div>

              <div class="bg-gradient-to-t from-[#F8FEFF] to-[#FFFFFF] py-5 px-10 flex-1 shadow">
                <div class="text-[#444] bg-[#E4EFFF] w-fit">吊钩盲区可视化系统</div>
                <div class="mt-2 flex">
                  <div class="text-sm text-[#828282] leading-7 flex-1">
                    <p>主机供电：220V AC。</p>
                    <p>移动端电池容量：12.6V 10.4AH（连续工作时间超12小时）。</p>
                    <p>显示屏参数：13寸 1920*1080P高清超薄工业显示屏。。</p>
                    <p>摄像机参数：变倍变焦摄像机，200W像素 1920*1080P分辨率。</p>
                    <p>充电速度：从完全馈电到满电充电时长约6小时。</p>
                  </div>
                  <img class="w-[61px] h-fit -mt-4" src="../../assets/images/icon_ quotation.png" />
                </div>
              </div>
            </div>
          </div>

          <!-- 升降机监控终端设备 -->
          <div v-show="current === 4">
            <h3 id="lift" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              升降机监控终端设备</h3>
            <div class="p-3 border-[0.5px] border-[#DBE9FF] text-[15px] text-[#1393FF] rounded">
              升降机监控系统，是集精密测量、自动控制、无线网络传输等多种技术于一体的电子监测系统，产品由主机及各种传感器组成，可实现驾驶员身份认证、门锁状态监测、载重监测及预警、轿厢倾斜度监测及预警、高度限位监测及预警、防冲顶监测及预警、制动及远程监控等功能。
            </div>
            <div
              class="mt-8 md:p-10 flex-center flex-col lg:flex-row md:bg-[url('~/assets/images/solution/lift_product_banner.png')] bg-image-base">
              <div
                class="bg-gradient-to-t mt-5 order-4 lg:order-1 from-[#F8FEFF] to-[#FFFFFF] p-8 w-full flex-1 shadow">
                <div class="text-[#444] bg-[#E4EFFF] w-fit">
                  施工升降机安全保护系统
                </div>
                <div class="leading-7 py-4 text-sm text-[#828282]">
                  <p class="text-[#222]">1.主机</p>
                  <div class="flex">
                    <p class="flex-1">起重重量：≤30t</p>
                    <p>工作温度：-20°至+60°</p>
                  </div>
                  <div class="flex">
                    <p class="flex-1">工作电压：AC 160-260v</p>
                    <p>综合精度误差：≤5%</p>
                  </div>
                  <p>数据存储：≥90个工作日</p>
                </div>
                <div class="leading-7 py-4 text-sm text-[#828282] border-t border-[#b7b7b7]">
                  <p class="text-[#222]">2.刷脸或刷卡模块,刷脸模块要求如下:</p>
                  <div class="flex">
                    <p class="flex-1">用户容量：500 人</p>
                    <p>记录容量：10 万条</p>
                  </div>
                  <div class="flex">
                    <p class="flex-1">摄像头：专用双摄像头</p>
                    <p>验证速度：&lt; 1 秒</p>
                  </div>
                  <div class="flex">
                    <p class="flex-1">LCD：240*320 分辨率</p>
                    <p>TTS：语音合成报中文姓名</p>
                  </div>
                </div>
                <div class="leading-7 py-4 text-sm text-[#828282] border-t border-[#b7b7b7]">
                  <div class="flex">
                    <p class="flex-1">通信方式：单机型;网络型</p>
                    <p>电源：DC 12V ,工作电流 1A</p>
                  </div>
                  <div class="flex">
                    <p class="flex-1">环境光线：0-20000Lux</p>
                    <p>使用距离：30-80cm</p>
                  </div>
                  <div class="flex">
                    <p class="flex-1">使用温度：0℃－45℃</p>
                    <p>使用湿度：20% - 80%</p>
                  </div>
                </div>
              </div>
              <img class="w-[59.5%] ml-8 order-2" src="../../assets/images/solution/lift_product.png" />
            </div>
          </div>

          <!-- 视频会议终端设备 -->
          <div v-show="current === 5">
            <h3 id="meeting" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              视频会议终端设备</h3>
            <!-- <div class="p-3 border-[0.5px] border-[#DBE9FF] text-[15px] text-[#1393FF] rounded">
              劳务实名制系统，可以对项目施工现场的所有进出人员进行考勤打卡，加强对建筑工人的有效管理，减少用工纠纷问题，保障农民工合法权益。劳务实名制终端设备主要包括：进出口闸机、人脸识别一体机、身份证阅读器、人脸采集摄像头等硬件设备。
            </div> -->
            <product-meeting></product-meeting>
          </div>

          <!-- 智能广播终端设备 -->
          <div v-show="current === 6">
            <h3 id="broadcast" class="w-fit text-[#1393FF] my-10 text-xl border-b-2 leading-4 border-[#FFA715]">
              智能广播终端设备</h3>
            <!-- <div class="p-3 border-[0.5px] border-[#DBE9FF] text-[15px] text-[#1393FF] rounded">
              劳务实名制系统，可以对项目施工现场的所有进出人员进行考勤打卡，加强对建筑工人的有效管理，减少用工纠纷问题，保障农民工合法权益。劳务实名制终端设备主要包括：进出口闸机、人脸识别一体机、身份证阅读器、人脸采集摄像头等硬件设备。
            </div> -->
            <div
              class="w-full mt-10 flex flex-wrap items-center justify-evenly shadow bg-[url('~/assets/images/bg_product.png')] bg-cover bg-no-repeat">
              <div class="p-5 text-center">
                <img class="w-[150px] h-[150px] inline-block" src="../../assets/images/solution/broadcast_pro_01.png" />
                <div class="text-[#444] mt-7">数字IP网络广播平台管理软件</div>
              </div>
              <div class="p-5 text-center">
                <img class="w-[150px] h-[150px] inline-block" src="../../assets/images/solution/broadcast_pro_02.png" />
                <div class="text-[#444] mt-7">数字IP网络室外防雨收扩机</div>
              </div>
              <div class="p-5 text-center">
                <img class="w-[150px] h-[150px] inline-block" src="../../assets/images/solution/broadcast_pro_03.png" />
                <div class="text-[#444] mt-7">高音喇叭</div>
              </div>
              <div class="p-5 text-center">
                <img class="w-[150px] h-[150px] inline-block" src="../../assets/images/solution/broadcast_pro_04.png" />
                <div class="text-[#444] mt-7">数字网络远程广播呼叫站</div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import ProudctVeriface from '../../components/ProudctVeriface.vue'
import ProductGate from '../../components/ProductGate.vue'
import ProductCollectFace from '../../components/ProductCollectFace.vue'
import ProductCardReader from '../../components/ProductCardReader.vue'
import ProductContainer from '../../components/ProductContainer.vue'
import ProductMeeting from '../../components/ProductMeeting.vue'
export default {
  components: {
    ProudctVeriface,
    ProductGate,
    ProductCollectFace,
    ProductCardReader,
    ProductContainer,
    ProductMeeting
  },
  data() {
    return {
      current: 0,
      list: [
        {
          name: '劳务实名制终端设备',
          path: '/product/hardware',
          children: [
            {
              name: '人脸识别一体机',
              path: '/product/hardware#ProudctVeriface',
            },
            {
              name: '进出口闸机',
              path: '/product/hardware#ProductGate',
            },
            {
              name: '人脸采集摄像头',
              path: '/product/hardware#ProductCollectFace',
            },
            {
              name: '身份证阅读器',
              path: '/product/hardware#ProductCardReader',
            },
            {
              name: '集装箱',
              path: '/product/hardware#ProductContainer',
            },
          ],
        },
        {
          name: '环境监测终端设备',
          path: '/product/hardware#environment',
        },
        {
          name: '视频监控终端设备',
          path: '/product/hardware#video',
        },
        {
          name: '塔机监控终端设备',
          path: '/product/hardware#tower',
        },
        {
          name: '升降机监控终端设备',
          path: '/product/hardware#lift',
        },
        {
          name: '视频会议终端设备',
          path: '/product/hardware#meeting',
        },
        {
          name: '智能广播终端设备',
          path: '/product/hardware#broadcast',
        },
      ],
    }
  },
  head: {
    title: '产品硬件中心-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '产品硬件中心',
      }
    ],
  },
  watch: {
    '$route.hash'(val) {
      this.list.forEach((item, index) => {
        if (item.path.includes(val)) {
          this.current = index
        }
      })
    }
  },
  methods: {
    handleTab(index) {
      this.current = index
    },
    handleLink() {

      const hash = this.$route.hash || ''
      console.log(hash);
      this.list.forEach((item, index) => {
        if (item.path.includes(hash)) {
          this.current = index
        }
      })
    }
  },
}
</script>
